import React, { Component } from 'react'
import PropTypes from 'prop-types'

import './style.css'

function UserGreeting(props) {
  return <h1>Welcome back!</h1>
}
function GuestGreeting (props) {
  return <h1>Please sign up.</h1>
}

function Greeting (props) {
  const isLoggedIn = props.isLoggedIn
  if (isLoggedIn) {
    return <UserGreeting />
  } else {
    return <GuestGreeting/>
  }
}

export default class LikeButton extends Component {
  constructor(props) {
    super(props)
    this.state = { like: false }
  }
  componentDidMount () {
    // ...
  }
  handleClick(e) {
    this.setState({ like: !this.state.like })
  }
  render() {
    const text = this.state.like ? 'like':'unlike'
    return (
      <div>
        <p onClick={this.handleClick.bind(this)}>
          You {text} this. CLICK to TOGGLE
        </p>
        <Greeting isLoggedIn={false} />
      </div>
    )
  }
}
LikeButton.propTypes = {
  name: PropTypes.string
}